<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 26px;
            color: #c92007;
            border: 2px solid #c92007;
            float: left;
        }
        button{
            float: left;
            height: 30px;
            border: none;
            background: #c92007;
            color: #fff;
        }
        button:hover{
            background: #fff;
            color: #c92007;
            transition: all 0.3s;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="btn1">开始</button>
    <button id="btn2">结束</button>

    <script>
        // 实现秒表功能, 包含时,分,秒,毫秒，点击按钮1开始计时，点击按钮2结束计时
        var oBox=document.querySelector("#box");
        var oBtn1=document.querySelector("#btn1");
        var oBtn2=document.querySelector("#btn2");

        oBtn1.onclick = function(){
            var num=0;
            timer=setInterval(function(){
                num+=5;
                var ms=num%1000;
                var ss=parseInt(num/1000)%60;
                var mm=parseInt(num/1000/60)%60;
                var hh=parseInt(num/1000/60/60)%24;
                if(ss<=0){
                    ss=ss+"0";
                }
                if(mm<=0){
                    mm=mm+"0";
                }
                if(hh<=0){
                    hh=hh+"0";
                }
                var res=hh+"时"+mm+"分"+ss+"秒"+ms+"毫秒";
                oBox.innerHTML=res;
            });
        }
        oBtn2.onclick=function(){
            clearInterval(timer);
        }
    </script>
</body>
</html>